<script setup>
import ResultTable from '@/components/ResultTable.vue'
import { ref } from 'vue'
// import { getWorkSchedulingsPageAPI } from '@/services/work'
// const props = defineProps({
//   // 表格数据
//   dataSource: {
//     type: Array,
//     default: () => [],
//   },
//   // 分页总数
//   total: {
//     type: Number,
//     default: 0,
//   },
//   // 表格加载状态
//   loading: {
//     type: Boolean,
//     default: false,
//   },
//   page: {
//     type: Number,
//     default: 1,
//   },
//   pageSize: {
//     type: Number,
//     default: 10,
//   },
// })
// let workSchedules = reactive([])
// const getWorkList = async () => {
//   const res = await getWorkSchedulingsPageAPI()
//   console.log(res)
//   workSchedules = res.data.items.map((ele) => {
//     ele.workSchedules
//   })
// }
// getWorkList()
const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit'])
// 表格列数据
const columns = ref([
  {
    title: '员工账号',
    dataIndex: 'employeeNumber',
    fixed: 'left',
    width: 120,
  },
  {
    title: '员工姓名',
    dataIndex: 'name',
    fixed: 'left',
    width: 120,
  },
  {
    title: '员工电话',
    dataIndex: 'phone',
    fixed: 'left',
    width: 140,
  },
  {
    title: '员工角色',
    dataIndex: 'userType',
    fixed: 'left',
    width: 120,
    customRender: ({ userType }) => {
      if (userType === 2) {
        return '快递员'
      } else {
        return '员工'
      }
    },
  },
  {
    title: '当前工作模式',
    dataIndex: 'workPatternName',
    fixed: 'left',
    width: 140,
  },
  {
    title: '1',
    dataIndex: '休',
    width: 80,
  },
  {
    title: '2',
    dataIndex: '休',
    width: 80,
  },
  {
    title: '3',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '4',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '5',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '6',
    dataIndex: '休',
    width: 80,
  },
  {
    title: '7',
    dataIndex: '休',
    width: 80,
  },
  {
    title: '8',
    dataIndex: '休',
    width: 80,
  },
  {
    title: '9',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '10',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '11',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '12',
    dataIndex: '上',
    width: 80,
  },
  {
    title: '13',
    dataIndex: '休',
    width: 80,
  },
])

// 表格数据
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}
</script>

<template>
  <ResultTable
    class="ant-table-striped"
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
    :scroll="{ x: 1600 }"
    :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
  >
  </ResultTable>
</template>

<style scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
